<template>
	<view class="sun-index page">
		<view class="sun-logo-box">
			<!-- <view class="sun-logo">
				<image class="sun-icon-img" src="/static/img/index_02.png" style="width:100%;" />
			</view> -->
		</view>
		<view class="sun-login-box sun-login-boxa">
			<view class="sun-label">
				<text class="label-text">账号</text>
			</view>
			<view class="sun-input-box">
				<input v-model="form.uname" type="text" placeholder="请输入账号" placeholder-class="placeholder-class"
					@input="handleInput('uname')" />
				<image @click="form.uname=''" class="close-icon" src="/static/img/close_icon.png" />
			</view>
			<text class="tips">{{unametips}}</text>
		</view>
		<view class="sun-login-box">
			<view class="sun-label">
				<text class="label-text">密码</text>
			</view>
			<view class="sun-input-box">
				<input v-model="form.pwd" type="text" placeholder="请输入密码" password="true"
					placeholder-class="placeholder-class" @input="handleInput('pwd')" />
				<image @click="form.pwd=''" class="close-icon" src="/static/img/close_icon.png" />
			</view>
			<text class="tips">{{pwdtips}}</text>
		</view>

		<view class="sun-tip">
			<radio :checked="checked" @click="clickRemember" style="transform:scale(0.9)">记住密码</radio>
		</view>
		<view class="login-btn-box">
			<view class="login-btn" :disabled="disabled" @click="login">登录</view>
		</view>
	</view>
</template>

<script>
	let currentWebview; //是否一键登录优先
	export default {
		data() {
			return {
				form: {
					uname: '',
					pwd: '',
				},
				disabled: false,
				checked: true, //单选框
				unametips: '',
				pwdtips: '',
			}
		},
		computed: {
			isPhone() {
				return /^1\d{10}$/.test(this.phone);
			}
		},
		onShow() {
			let user = vk.getVuex('$user.rememberUser');
			if(user){
				this.form.uname = user.uname
				this.form.pwd = user.pwd
			}
		},
		methods: {
			login() {
				if (this.disabled) {
					return false;
				}
				if (!this.form.uname) {
					this.unametips = '请输入账号'
					return false;
				}
				if (!this.form.pwd) {
					this.pwdtips = '请输入密码'
					return false;
				}
				this.disabled = true;
				this.unametips = '';
				this.pwdtips = '';

				uni.showLoading({
					title: '登录中...',
					mask: true
				});

				uni.request({
					method: 'POST',
					url: this.$resource.domain + this.$api.AppLogin,
					data: {
						username: this.form.uname,
						password: this.form.pwd,
					},
					success: (res) => {
						// console.log(res, '登录结果');
						this.disabled = false;

						if (res.statusCode == 200 && res.data.code == 200) {
							if (this.checked) {
								if (this.form.uname && this.form.pwd) {
									vk.setVuex('$user.rememberUser', this.form);
								}
							} else {
								vk.setVuex('$user.rememberUser', null);
							}
							
							vk.setVuex('$user.token', res.data.token);
							
							this.$global.getUserInfo();

							setTimeout(() => {
								this.loginSuccess();
							}, 1000)

						} else {
							uni.hideLoading();
							uni.showToast({
								title: '账号密码错误',
								icon: 'error',
								duration: 3000
							})
						}

					},
					fail: (err) => {
						console.log(err, '登录失败')
						this.disabled = false;
						uni.hideLoading();
						uni.showToast({
							title: '登录失败！' + JSON.stringify(err),
							icon: 'error',
							duration: 3000
						})
					}
				})
			},
			// 登录成功后的处理
			loginSuccess() {
				// 跳转到首页,或页面返回
				var pages = getCurrentPages();
				// console.log(pages.length,pages[pages.length-1].route);
				if (pages.length > 1 &&
					pages[pages.length - 2] &&
					pages[pages.length - 2].route &&
					pages[pages.length - 2].route.indexOf('login/login') == -1
				) {
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('loginSuccess', {});
					vk.navigateBack();
				} else {
					// 进入首页
					vk.navigateToHome();
				}
			},
			clickRemember() {
				this.checked = !this.checked
			},
			handleInput(target) {
				if (target == 'uname') {
					this.unametips = '';
				} else if (target == 'pwd') {
					this.pwdtips = '';
				}
			}
		}
	}
</script>

<style scoped>
	.sun-logo-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 500rpx;
	}

	.sun-logo {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 500rpx;
		/* border-radius: 15rpx;
		background-color: #12C8B9;
		box-shadow: 0rpx 0rpx 30rpx rgba(18,200,185,0.5); */
	}

	.close-icon {
		width: 36rpx;
		height: 34rpx;
	}

	.sun-icon-img {
		width: 90%;
		height: 400rpx;
		position: absolute;
		top: 130rpx;
	}

	.sun-login-box {
		padding: 20rpx 60rpx;
	}

	.sun-login-boxa {
		padding-top: 30rpx;
	}

	.sun-label {
		display: flex;
		align-items: center;
	}

	.label-text {
		margin-bottom: 10rpx;
		margin-left: 16rpx;
		font-weight: 500;
		color: #272e2d;
		font-size: 30rpx;
	}

	.sun-input-box {
		display: flex;
		align-items: center;
		height: 65rpx;
		border: 5rpx solid #eee;
		padding: 0px 10rpx;
	}

	.sun-input-box input {
		flex: 1;
	}

	.placeholder-class {
		font-size: 30rpx;
		color: #C0C0C0;
	}

	.sun-tip {
		display: flex;
		justify-content: space-between;
		padding: 0rpx 68rpx;
	}

	.sun-tip-text {
		color: #30C6B3;
	}

	/* .login-btn-box {
		position: absolute;
		bottom: 129rpx;
		left: 0;
		width: 750rpx;
		padding: 50rpx 68rpx 0rpx;
	} */
	.login-btn-box {
		margin-top: 100upx;
	}

	.login-btn {
		height: 82rpx;
		width: 80%;
		border-radius: 41rpx;
		background-color: #12C8B9;
		box-shadow: -1px 12px 11px 0px rgba(16, 170, 157, 0.4);
		text-align: center;
		line-height: 82rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
		margin: 0 auto;
	}

	.register {
		width: 85%;
		height: 150rpx;
		margin: 0 auto;
	}

	.canvas-img-code {
		float: right;
		margin-top: 36rpx;
	}

	.yanzheng {
		float: left;
		width: 50%;
		height: 83rpx;
		margin-top: 36rpx;
		border: 2px solid RGB(238, 238, 238);
	}

	.rememberPsw {
		display: inline-block;
		max-width: 100%;
		margin-bottom: 5px;
		font-weight: bold;
	}

	.tips {
		color: rgb(245, 8, 8);
		font-size: 12px;
		display: initial;
		padding-right: 30px;
		text-align: left;
	}
</style>